<template>
	<view class="zh-service-agent">
		<view class="banner">
			<image :src="IMG_URL + '/service/agent/banner.png'" class=""/>
		</view>
		<view class="box">
			<text>针对成本高昂、渠道受阻、供应能力不足等难题，平台利用强大的国内外渠道资源、信用授信体制等优势，为客户捕捉市场机会，提供高性价比原材料采购，解决客户供应链周转和原料品质不稳定的难题.</text>
		</view>
		<view class="flow">
			<view class="title">
				<text>服务流程</text>
			</view>
			<view class="content display-flex justify-between flex-wrap">
				<view class="item">
					<image :src="IMG_URL + '/service/agent/1.png'"/>
					<view>
						<text>1.贸易进口</text>
						<text>合同签订</text>
					</view>
				</view>
				<view class="item">
					<image :src="IMG_URL + '/service/agent/2.png'"/>
					<view>
						<text>2.进口信用证</text>
						<text>开证申请</text>
					</view>
				</view>
				<view class="item">
					<image :src="IMG_URL + '/service/agent/3.png'"/>
					<view>
						<text>3.货到港口</text>
					</view>
				</view>
				<view class="item">
					<image :src="IMG_URL + '/service/agent/4.png'"/>
					<view>
						<text>4.申请缴税</text>
					</view>
				</view>
				<view class="item">
					<image :src="IMG_URL + '/service/agent/5.png'"/>
					<view>
						<text>5.销售发货</text>
					</view>
				</view>
				<view class="item">
					<image :src="IMG_URL + '/service/agent/6.png'"/>
					<view>
						<text>6.结算和开票</text>
					</view>
				</view>
			</view>
		</view>
		<view class="advantage">
			<view class="title">
				<text>我们的优势</text>
			</view>
			<view class="content">
				<view class="item display-flex align-center">
					<image :src="IMG_URL + '/service/agent/you_1.png'"/>
					<text>专业代理信用证</text>
				</view>
				<view class="item display-flex align-center">
					<image :src="IMG_URL + '/service/agent/you_2.png'"/>
					<text>完善的配套服务</text>
				</view>
				<view class="item display-flex align-center">
					<image :src="IMG_URL + '/service/agent/you_3.png'"/>
					<text>全程货运跟踪</text>
				</view>
				<view class="item display-flex align-center">
					<image :src="IMG_URL + '/service/agent/you_4.png'"/>
					<text>专业外贸团队 一对一服务</text>
				</view>
			</view>
		</view>
		<view class="bottom-btn"  @click="openServiceLink">
			<button class="app-primary-button btn" hover-class="app-primary-button-active btn">业务洽谈</button>
		</view>
		<service-link :show="showServiceLink" @close="changeServiceLink" @link="linkService" @save="saveService"></service-link>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { tip } from '@/utils'
	import { onHide, onShareAppMessage } from '@dcloudio/uni-app'
	import serviceLink from '@/pages/components/service-link'
	
	import { IMG_URL } from '@/utils/constant'
	const showServiceLink = ref(false)
	
	onHide(() => {
		showServiceLink.value = false
	})
	
	onShareAppMessage(() => {})
	
	const openServiceLink = () => {
		changeServiceLink()
	}
	
	const changeServiceLink = () => {
		showServiceLink.value = !showServiceLink.value
	}
	
	const linkService = () => {
		uni.makePhoneCall({
			phoneNumber:"0757-82138330",
			success:() => {
				console.log('拨打电话成功')
			},
			fail:() => {
				
			}
		})
	}
	
	const saveService = () => {
		tip.showToast('已保存，请用微信扫码加好友')
	}
</script>

<style lang="scss" scoped>
	.zh-service-agent {
		padding-bottom:150rpx;
		.banner {
			width:100%;
			height:391rpx;
			image {
				width:100%;
				height:391rpx;
			}
		}
		.box {
			position: relative;
			margin:-195rpx 45rpx;
			border-radius: 18px;
			background-color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			padding:50rpx 40rpx;
			text {
				line-height: 44rpx;
			}
		}
		.flow {
			margin: 215rpx 25rpx 0;
			padding:34rpx;
			background-color: #fff;
			border-radius: 24px;
			.title {
				font-size: 36rpx;
				font-weight: bold;
			}
			.content {
				.item {
					text-align: center;
					width:200rpx;
					font-size: 28rpx;
					margin-top: 34rpx;
					text {
						display:block;
					}
					image {
						width:80rpx;
						height:80rpx;
					}
				}
			}
		}
		.advantage {
			margin: 20rpx 25rpx 0;
			padding:34rpx 34rpx 0;
			background-color: #fff;
			border-radius: 24px;
			.title {
				font-size: 36rpx;
				font-weight: bold;
			}
			.content {
				.item:nth-child(n + 2) {
					border-top:1rpx solid rgba(0,0,0,0.08);
				}
				.item {
					margin-left:33rpx;
					padding: 40rpx 0;
					image {
						width:48rpx;
						height: 48rpx;
					}
					text {
						margin-left:34rpx;
					}
				}
			}
		}
		.bottom-btn {
			position:fixed;
			left:0;
			right:0;
			bottom:0;
			padding:15rpx 25rpx;
			background-color: #fff;
			.btn {
				border-radius: 45px;
			}
		}
	}
</style>
